<template>

  <div>
    <el-dialog v-bind="$attrs" v-model="taskAddWinDialogVisible"  @close="handleClose" title="新增任务">
      <div>
        当前项目为:{{project.projectName}}
        <div v-if="parentTask">父级任务为：{{parentTask.taskTitle}}</div>
      </div>
      <el-form ref="新增任务" :model="newTask" :rules="rules" size="medium" label-width="100px"
               label-position="left">
        <el-form-item label="任务标题" prop="field101">
          <el-input v-model="newTask.taskTitle" placeholder="请输入任务标题" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="任务工期" prop="field102">
          <el-input v-model="newTask.taskDuration" placeholder="请输入任务工期" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="field106">
          <el-date-picker v-model="newTask.startTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                          :style="{width: '100%'}" placeholder="请选择开始时间" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="field107">
          <el-date-picker v-model="newTask.endTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                          :style="{width: '100%'}" placeholder="请选择结束时间" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="任务描述" prop="field112">
          <el-input v-model="newTask.taskDesc" type="textarea" placeholder="请输入任务描述"
                    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="field114">
          <el-select v-model="newTask.userId" placeholder="请选择负责人" clearable :style="{width: '100%'}">
            <el-option :value="0">暂不分配人员</el-option>
            <el-option v-for="user in users" :label="user.username"
                       :value="user.userId" ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="newTaskSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, onMounted, ref, shallowRef, watch} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import loginRequest from "@/api/login.js";
import taskRequest from "@/api/task.js";
import {ElMessage} from "element-plus";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['addComplete','cancelTaskAdd'])
// 弹窗标记
let taskAddWinDialogVisible = ref(false);
let users = ref([]);
let props = defineProps(["project","parentTask","isShow"]);
// 编辑的项目对象
let newTask = ref({})
// 富文本编辑器相关的属性
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML ，如果我们修改了内容，这里会跟着变化
const valueHtml = ref('');
// 工具栏配置
const toolbarConfig = {}
// 编辑器配置
const editorConfig = { placeholder: '请输入任务描述...' }
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

/**
 * 取消编辑按钮事件
 */
function cancelNewTask(){
  newTask = ref({});
  taskAddWinDialogVisible.value = false;
  emits("cancelTaskAdd")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  emits("cancelTaskAdd")
}

/**
 * 编辑提交
 */
function newTaskSubmit(){
  newTask.value.taskDesc = valueHtml.value;
  newTask.value.taskParent = 1;
  newTask.value.taskParentId = 0;
  newTask.value.projectId = props.project.projectId;
  if(props.parentTask){
    newTask.value.taskParentId = props.parentTask.taskId;
  }
  taskRequest.save(newTask.value,res=>{
    if(res.code == 200){
      ElMessage({
        type:"success",
        message:"新增任务成功"
      });
      // 关闭弹窗
      cancelNewTask();
      valueHtml.value=""
      // 触发编辑完成的事件
      emits('addComplete',res.data);
    }else{
      ElMessage({
        type:"warning",
        message:"任务添加失败"
      });
    }
  })
}


/**
 * 侦听器 侦听 props.isShow
 */
watch(()=>props.isShow,()=>{
  taskAddWinDialogVisible.value = props.isShow;
});

onMounted(()=>{
  loginRequest.loadUsers(res=>{
    users.value = res.data;
  })
})
</script>
<style>
</style>
